<template>
    <div class="navbar">
        <div class="page-header">
            <div class="back" v-if="title.back"
                 @click="goBack">
                <i class="el-icon-back" style="margin-right: 5px"></i>返回
            </div>
            <el-divider direction="vertical"></el-divider>
            <div class="title">
                <label>
                    <input id="title"
                           class="modTitle"
                           @blur="finishMod"
                           v-model="title.message"
                           disabled="disabled"
                    />
                </label>
                <i v-if="title.isGraph" class="el-icon-edit-outline title-icon" style="color: black" @click="modifyTitle"></i>
                <i v-if="title.isGraph" class="el-icon-picture-outline title-icon" style="color: black" @click="modifyCover"></i>
            </div>
        </div>
        <div class="right-menu">
            <el-dropdown class="avatar-container" trigger="click">
                <div class="avatar-wrapper">
                    <el-image id="avatar"
                              :src="avatar"
                              class="user-avatar"
                              alt=""/>
                </div>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <el-dropdown-item>
                        <el-tooltip placement="left"
                                    effect="dark"
                                    :content="'用户名:'+userInfo.name+' '+'性别:'+userInfo.gender+' '+'邮箱:'+userInfo.email">
                            <div><i class="el-icon-user"></i>个人信息</div>
                        </el-tooltip>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <div @click="modifyAvatar"><i class="el-icon-eleme"></i>更换头像</div>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <div @click="changeState"><i class="el-icon-key"></i>修改密码</div>
                    </el-dropdown-item>
                    <el-dropdown-item divided @click.native="logout">
                        <i class="el-icon-bicycle"></i>登出
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <key-modifier :visible="state" :userId="userInfo.id" @close="changeState" @logout="logout"></key-modifier>
    </div>
</template>

<script>
    import d3ClassGetter from "../../assets/javascript/d3ClassGetter";
    import global from "../../store/global";
    import {mapActions} from "vuex";
    import KeyModifier from "./keyModifier";

    export default {
        name: "navbar",
        components: {KeyModifier},
        inject: ["reload1"],
        data() {
            return {
                title: d3ClassGetter.title,
                userInfo: {},
                state: false,
                avatar: require(`../../../public/img/demo.png`)
            };
        },
        mounted() {
            this.init();
        },
        mutation: {},
        component: {},
        methods: {
            ...mapActions([
                "uploadAvatar",
                "uploadGraphCover",
                "getUserInfo",
                "logOut",
                "uploadAvatar",
                "updateGraph"
            ]),
            init: function () {
                this.getUserInfo(this.$cookies.get("userId")).then(res => {
                    this.userInfo = res.data;
                    if (this.userInfo.gender === 0) {
                        this.userInfo.gender = "男";
                    } else {
                        this.userInfo.gender = "女";
                    }
                    if (this.userInfo.avatar != null) {
                        this.avatar = this.userInfo.avatar;
                    }
                });
            },
            changeState: function () {
                this.state = !this.state;
            },
            logout: function () {
                //await this.$store.dispatch('user/logout')
                this.logOut().then(res => {
                    this.$cookies.remove("Authorization");
                    this.$cookies.remove("userId");
                    this.$router.push({
                        path: "/",
                        name: ""
                    });
                });

            },
            goBack: function () {
                this.$router.go(-1);
                this.title.message = "主界面";
                this.title.back = false;
                this.title.isGraph = false;
            },
            modifyTitle: function () {
                let title = document.getElementById("title");
                title.removeAttribute("disabled");
                title.focus();
            },
            finishMod: function () {
                let title = document.getElementById("title");
                title.setAttribute("disabled", "disabled");
                this.updateGraph({id: this.$route.params.graphId, name: title.value});
            },
            modifyCover: function () {
                global.uploadFile(this.$route.params.graphId, "image/*", this.uploadGraphCover);

                },
            modifyAvatar: function () {
                global.uploadFile(this.userInfo.id, "image/*", this.uploadAvatar);
            }
        }
    };
</script>

<style scoped>
    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }

    a:active {
        text-decoration: none;
    }

    a:link {
        text-decoration: none;
    }

    a:visited {
        text-decoration: none;
    }

    .navbar {
        height: 50px;
        overflow: visible;
        position: relative;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    }

    .navbar:hover {
        background: rgba(0, 0, 0, .025)
    }

    .page-header {
        float: left;
        height: 100%;
        line-height: 50px;
        margin-left: 30px;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
        font-size: 18px;
    }

    .back {
        display: inline-block;
        font-size: 14px;
        margin-right: 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    .back:hover {
        color: #409eff;
    }

    .title {
        display: inline-block;
        margin-left: 10px;
    }

    .title-icon {
        font-size: 16px;
        border-radius: 3px;
        padding: 3px;
    }

    .title-icon:hover {
        background-color: rgba(0, 0, 0, 0.05);
        cursor: pointer;
    }

    .modTitle {
        font-size: 18px;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;

        width: 150px;
        height: 60%;
        background-color: transparent;
        border-color: black;
        border-width: 0;
        padding: 2px 4px;
    }

    .modTitle:focus {
        outline: none;
        border-color: #409eff;
        border-width: 0 0 2px 0;
        border-radius: 1px;
    }

    .modTitle:disabled {
        color: black;
        background-color: transparent;
    }

    .right-menu {
        float: right;
        height: 100%;
        line-height: 50px;
    }

    .right-menu:focus {
        outline: none;
    }

    .avatar-container {
        margin-right: 30px;
    }

    .avatar-wrapper {
        width: 40px;
        height: 40px;
        margin-top: 5px;
        position: relative;
        border-radius: 5px;
        border: rgba(0, 0, 0, 0.1) 1px solid;
        box-shadow: 0 0 1px 2px #eeeeee;
    }

    .user-avatar {
        cursor: pointer;
        max-width: 40px;
        max-height: 40px;
        border-radius: 5px;
    }

    .user-dropdown {
        max-width: 150px;
    }

</style>